<template>
    <!--    图方便,直接用tailwind编写css-->
    <div class="border mb-4">
        <div class="flex px-4 py-2 hover:bg-gray-200 grid grid-cols-8 items-center cursor-pointer" v-for="(item, index) in djRadios" :key="index">
            <div class="col-span-5 flex items-center">
                <n-image :src="item.picUrl + '?param=50y50'" class="border"></n-image>
                <p class="ml-4">{{item.name}}</p>
            </div>
            <div class="col-span-2">
                <p>订阅次数: {{ item.subCount }}</p>
            </div>
            <div class="col-span-1">
                <p>第{{item.programCount}}期</p>
            </div>
        </div>
    </div>
</template>

<script>
import {NImage} from 'naive-ui';
import {getDjRadios} from "@/network/dj/toplist";
import {onMounted, reactive, toRefs, watchEffect} from "vue";
export default {
    // 用户创建的电台
    name: "DjRadio",
    props: {
        id: {
            type: String,
            default: '-1'
        }
    },
    setup(props) {
        const djRadioList = reactive({
            djRadios: []
        })
        const TAG = "DjRadio.vue";
        const init = () => {
            getDjRadios(props.id).then(res => {
                djRadioList.djRadios = res.data.djRadios;
            })
        }
        onMounted(() => {
            watchEffect(() => {
                let cid = props.id;
                init();
            })
        })
        return {
            ...toRefs(djRadioList)
        }
    },
    components: {
        NImage
    }
}
</script>

<style scoped>

</style>